Ext.define('Sh.ux.Year', {
    extend: 'Ext.picker.Month',
    alias: 'widget.yearpicker',
    renderTpl: [
                '<div id="{id}-bodyEl" class="{baseCls}-body" style="width:65px;">',
                  '<div id="{id}-monthEl" class="{baseCls}-months" style="display:none">',
                      '<tpl for="months">',
                          '<div class="{parent.baseCls}-item {parent.baseCls}-month"><a style="{parent.monthStyle}" href="#" hidefocus="on">{.}</a></div>',
                      '</tpl>',
                  '</div>',
                  '<div id="{id}-yearEl" class="{baseCls}-years">',
                      '<div class="{baseCls}-yearnav">',
                          '<button id="{id}-prevEl" class="{baseCls}-yearnav-prev"></button>',
                          '<button id="{id}-nextEl" class="{baseCls}-yearnav-next"></button>',
                      '</div>',
                      '<tpl for="years">',
                          '<div class="{parent.baseCls}-item {parent.baseCls}-year"><a href="#" hidefocus="on">{.}</a></div>',
                      '</tpl>',
                  '</div>',
                  '<div class="' + Ext.baseCSSPrefix + 'clear"></div>',
                '</div>',
                '<tpl if="showButtons">',
                    '<div id="{id}-buttonsEl" class="{baseCls}-buttons">{%',
                        'var me=values.$comp, okBtn=me.okBtn, cancelBtn=me.cancelBtn;',
                        'okBtn.ownerLayout = cancelBtn.ownerLayout = me.componentLayout;',
                        'okBtn.ownerCt = cancelBtn.ownerCt = me;',
                        'Ext.DomHelper.generateMarkup(okBtn.getRenderTree(), out);',
                        'Ext.DomHelper.generateMarkup(cancelBtn.getRenderTree(), out);',
                    '%}</div>',
                '</tpl>'
            ]
});
